<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="tag" tagdir="/WEB-INF/tags" %>

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>みんなでつくる放射線量マップ</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="jquery.mobile-1.0a4.1.min.js"></script>
    <script><!--
successCallback = function(position) {
<tag:loggedin>
 document.getElementById("lat").value = position.coords.latitude;
 document.getElementById("lng").value = position.coords.longitude;
 document.getElementById("alt").value = position.coords.altitude;
 document.getElementById("acc").value = position.coords.accuracy;
 document.getElementById("post").disabled = false;
</tag:loggedin>
}

errorCallback = function(error) {
 showError("位置情報取得時にエラーが発生しました");
 console.log(message);
<tag:loggedin>
 document.getElementById("send").disabled = true;
</tag:loggedin>
<tag:notloggedin>
 document.getElementById("signinlink").innerHTML = "";
</tag:notloggedin>
}

var id;
function watchPosition() {
<tag:loggedin>
 if (navigator.geolocation) {
   id = navigator.geolocation.watchPosition(successCallback, errorCallback);
 } else {
    showError("このブラウザは位置情報に対応していないためご利用できません．");
 }
</tag:loggedin>
}

function showError(message) {
 document.getElementById("error_message").innerHTML = message;
}
    --></script>
</head>
<body onload="watchPosition()">
<tag:notloggedin>
  <div data-role="page">
    <div data-role="header">
     <h1>みんなでつくる放射線量マップ</h1>
	</div>
	<div data-role="content">
		<div id="error_message"></div>
	    <h2>サービスの目的</h2>
	    みなさんがお持ちの放射線量計測器(ガイガーカウンターなど)で計測した放射線量を，みんなで共有しようというサービスです．
	    位置情報が取得できるブラウザがあれば，簡単に使えます．
	    <h2>サービス利用の手順</h2>
	    <p>サービスは，<a href="#record">放射線量の記録</a>と，<a href="#look">地図の閲覧</a>に分かれます．同じユーザが記録と閲覧を行なって頂いても問題ありません．</p>
    </div>
  </div>
  <div id="look" data-role="page">
     <div data-role="header">
       <h1>みんなでつくる放射線量マップ</h1>
       <h2>地図閲覧のための手順</h2>
     </div>
     <div data-role="content">
	    <p><a rel="external" href="map.html">地図閲覧のためのサイト</a>に移動してください．</p>
	 </div>
  </div>
  <div id="record" data-role="page">
     <div data-role="header">
       <h1>みんなでつくる放射線量マップ</h1>
	   <h2>放射線量記録のための手順</h2>
	 </div>
	 <div data-role="content">
	    <div id="signinlink"><a href="signin" rel="external"><img src="./images/sign-in-with-twitter-d.png"/></a></div>
	    <p><strong>まだ全ての機能が実装されてはいません．</strong></p>
	    <p>認証とtweetのためにTwitterアカウントが必要です．また，位置情報の取得ができるWebブラウザが必要です．</p>
	    <p>このページの上にあるボタンでログインしてください．</p>
	    <p>認証が完了すると，Webブラウザが位置情報を自動的に取得して画面上に表示します．また，【送信】のボタンが有効になります．</p>
	    <p>お手元の計測器から得られた数値をμSv/hで入力して送信してください．</p>
	    <p>「Tweetする」のチェックボックスを有効にしている場合には，位置情報を含めて認証に使ったアカウントでtweetされます．</p>
	    <p>同時に，Google Fusion Tables のデータベースに，登録時刻・位置情報・放射線量・記録者固有のIDが記録されます．
	    記録者固有のIDは，Twitter IDを基にして，元のTwitter IDは容易に推測できないように自動生成されます．(個人情報保護をしつつ，データの信頼性を確保しやすくするため)</p>
	</div>
  </div>
</tag:notloggedin>
<tag:loggedin>
  <div data-role="page">
    <div data-role="header">
     <h1>みんなでつくる放射線量マップ</h1>
    Welcome ${twitter.screenName}
	</div>
	<div data-role="content">
		<div id="error_message"></div>

    <form action="./post" method="post">
<table>
<tr><th>現時点の線量</th><td><input type="text" id="uSv" name="uSv"/>uSv/h</td></tr>
<tr><th>コメント(任意)</th><td>
        <textarea cols="80" rows="2" name="comment"></textarea></td></tr>
<tr><th>ツイートする</ht><td><input type="checkbox" id="tweet" name="tweet"></input></td>
</table>
        <input type="submit" id="post" name="post" value="送信" disabled="true"/>
<h2>location information</h2>
<table>
<tr><td>Latitude</td><td><input type="text" id="lat" name="lat" readonly="readonly" value="位置情報取得中"/></td></tr>
<tr><td>Longitude</td><td><input type="text" id="lng" name="lng" readonly="readonly"/></td></tr>
<tr><td>Altitude</td><td><input type="text" id="alt" name="alt" readonly="readonly"/></td></tr>
<tr><td>Accuracy</td><td><input type="text" id="acc" name="acc" readonly="readonly"/></td></tr>
</table>
    </form>
    </div>
    <div data-role="footer">
     <a rel="external" href="./logout">logout</a>
    </div>
</tag:loggedin>
</body>
</html>
